<template>
  <div class="menu">
    <el-menu class="el-menu-vertical" :default-active="active" :collapse="collapse">
      <menu-item v-for="item in MenuData" :MenuData="item" :currentPath="item.path" :active="active" :key="item.name" />
    </el-menu>
  </div>
</template>
<script>
import MenuItem from './MenuItem.vue'
import router from '../router/index'
export default {
  name: 'meNu',
  components: {
    MenuItem
  },
  data () {
    return {
      MenuData: [],
      active: '首页',
      collapse: false
    }
  },
  watch: {
    $route: {
      handler (val) {
        this.active = val.name
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.MenuData = router.options.routes.filter((item) => item.isHidden !== true)
    this.$bus.$on('changeCollapse', (collapse) => { this.collapse = collapse })
  }
}
</script>
<style lang="less">
.el-menu {
  background-color: rgb(51, 65, 87)!important;
  border-right: none !important;
}
.el-menu-item:focus,
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgb(41, 52, 70)!important;
}
.el-menu-item,
.el-submenu__title {
  height: 50px!important;
  line-height: 50px!important;
  color: white!important;
}
.el-menu-item.is-active {
    color: #409EFF!important;
}
.menu {
  background-color: rgb(51, 65, 87)!important;
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu--collapse>div>.el-submenu>.el-submenu__title span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }
  .el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
}</style>
